(function (param) {
  console.log("search");
  // 头部组件
  const Header = window.VueComponents.Header;
  // 底部组件
  const Footer = window.VueComponents.Footer;
  // 卡片组件
  const CardCom = window.VueComponents.CardCom;
  const CardHead = window.VueComponents.CardHead;
  // 排行榜列表组件
  const TopList = window.VueComponents.TopList;
  // 咨询列表组件
  const ConsultCom = window.VueComponents.ConsultCom;
  // 影视列表组件
  const VideoList = window.VueComponents.VideoList;

  Vue.createApp({
    components: {
      HeaderCom: Header,
      CardCom,
      CardHead,
      HeaderCom: Header,
      FooterCom: Footer,
      TopList,
      ConsultCom,
      VideoList,
    },
    data: () => ({
      // 搜索到的数据
      searchData: [],
      showSearchDATA: [], //要展示的数据 分页
      pagination: {
        //分野数据
        page: 0,
        data: [], //一共多少页
        pageSize: 10,
      },
      sideData: [], //侧边栏数据
    }),
    computed: {
      // 是否有下一页
      hasNext() {
        const page = this.pagination.page;
        const total = this.pagination.data.length;
        return page >= total;
      },
      // 是否有上一页
      hasUp() {
        const page = this.pagination.page;
        return page <= 1;
      },
    },
    watch: {
      searchData: {
        handler(arr) {
          const len = arr.length;
          const pageSize = this.pagination.pageSize;
          if (len > pageSize) {
            this.pagination.data = new Array(
              len / pageSize + (len % pageSize > 1 ? 1 : 0)
            )
              .fill(1)
              .map((_, i) => i + 1);
          } else {
            this.pagination.data = [1];
            this.page = 1;
          }
        },
      },
    },
    created() {
      //  数据初始化
      this.navInit();
      this.initHotData(); //初始化 其他数据
    },
    methods: {
      initHotData() {
        const TypeData = window.APIDATA.TypeData;
        const TagData = window.APIDATA.TagData;
        let result = [];
        new Array(0, 1).forEach((_, index) => {
          const temp = TypeData(_)[0];
          const tagType = TagData(_)[0]; //每个标签的数据
          result.push({
            data: temp.splice(0,20).map((item) => ({
              id: item.season_id,
              title: item.title,
              pic: item.order,
              desc: item.subTitle,
              img: item.cover,
              href: `second.html?id=${item.season_id}&type=${_}&tag=${tagType.id}`,
            })),
            title: tagType.title,
          });
        });
        this.sideData = result;
        // console.log("result", result);
      },
      // 初始化
      navInit() {
        // 获取url参数
        const query = this.getQueryVariable();
        if (query.search) {
          this.handSearch(query.search);
        } else {
        }
      },
      handSearch(query) {
        query = window.decodeURIComponent(query);
        // 影视数据
        const TypeData = window.APIDATA.TypeData;

        const TagData = window.APIDATA.TagData;

        let result = [];
        new Array(4).fill(1).forEach((_, index) => {
          const tagType = TagData(index); //每个标签的数据
          const typeTemp = TypeData(index); //每个类型的数据
          typeTemp.forEach((item, typeIndex) => {
            const _tagType = tagType[typeIndex];
            item.forEach((items) => {
              result.push(
                Object.assign({}, items, {
                  type: _tagType,
                  hrefUrl: `second.html?id=${items.season_id}&type=${index}&tag=${_tagType.id}`,
                })
              );
            });
          });
        });
        // 拿到所有数据
        // 查找对应数据
        const searchData = result.filter(
          (item) => item.title.indexOf(query) > -1
        );
        this.searchData = searchData.map((item) => ({
          id: item.season_id,
          title: item.title,
          pic: item.order,
          desc: item.subTitle,
          img: item.cover,
          index_show: item.index_show,
          type: item.type,
          href: item.hrefUrl,
        }));
        // 先跳转一页才处理数据
        this.handPagination(1);
      },

      handPage(num) {
        // 下一页
        if (num) {
          if (!this.hasNext) {
            this.handPagination(this.pagination.page + 1);
          }
        } else {
          if (!this.hasUp) {
            this.handPagination(this.pagination.page - 1);
          }
        }
        // 上一页
      },
      handPagination(num) {
        // 翻页
        const current = this.pagination.page;
        const pageSize = this.pagination.pageSize;
        if (!this.searchData.length) return;
        if (num != current) {
          const useArr = this.searchData.map((e) => Object.assign({}, e));
          const result = useArr.splice((num - 1) * pageSize, pageSize);
          this.showSearchDATA = result;
          this.pagination.page = num;
        }
      },
 
      getQueryVariable() {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        let queryValue = {};
        vars.forEach((pair) => {
          if (pair.indexOf("=") != -1) {
            const item = pair.split("=");
            queryValue[item[0]] = item[1];
          }
        });
        return queryValue;
      },
    },
  }).mount("#app-search");
})();
